<html>
 <head>
  <script type="application/javascript">//<![CDATA[
function draw() {
  var canvas = document.getElementById("canvas"),
      ctx = canvas.getContext("2d"),
      size = canvas.width / 2,
      link = document.createElement("a");
  ctx.translate(size, size);
  for (i = 0; i < 4; i += 1) {
     ctx.save();
     ctx.rotate(i * Math.PI / 2);
     ctx.translate(0, -size);
     drawPattern(ctx, size);
     ctx.restore();
  }
  document.body.appendChild(document.createElement("br"));
  link.appendChild(document.createTextNode("download image"));
  link.setAttribute("href", canvas.toDataURL());
  document.body.appendChild(link);
}
function drawPattern(ctx, size) {
  var i = 0,
      step = 2;
  while (i < size) {
    ctx.fillStyle = "rgb(0,0,0)";
    ctx.fillRect (i, i, size - i, step);
    ctx.fillRect (i, i, step, size - i);
    i += 2 * step;
  }
}
//]]></script>
	 </head>
	 <body onload="draw()">
<p>This image can be used to find clipping problems. If the sides of the image are clipped asymetrically, it will obvious visually.</p>
   <canvas id="canvas" width="136" height="136"></canvas>
<img src="" alt="pregenerated"/>
 </body>
</html>
